{% extends 'base.html' %}
{% block title %}Mark Attendance{% endblock %}
{% block content %}
<h3>Mark Attendance</h3>

<form method="post">
  {% csrf_token %}
  <div class="mb-3 col-md-3 p-0">
    {{ date_form.date.label_tag }}
    {{ date_form.date }}
  </div>

  <table class="table table-bordered mt-3">
    <thead>
      <tr>
        <th>Roll</th>
        <th>Name</th>
        <th style="width:200px">Status</th>
      </tr>
    </thead>
    <tbody>
      {% for s in students %}
      <tr>
        <td>{{ s.roll_number }}</td>
        <td>{{ s.name }}</td>
        <td>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="status_{{ s.id }}" id="present_{{ s.id }}" value="Present"
              {% if attendance_map.s_id == "Present" %}{% endif %}
              {% if attendance_map and attendance_map.s_id %}
              {% endif %}
            >
            <label class="form-check-label" for="present_{{ s.id }}">Present</label>
          </div>

          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="status_{{ s.id }}" id="absent_{{ s.id }}" value="Absent" checked>
            <label class="form-check-label" for="absent_{{ s.id }}">Absent</label>
          </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <button class="btn btn-primary">Save Attendance</button>
</form>

<script>
  // Pre-select existing attendance statuses using data from attendance_map
  (function(){
    const attendance_map = {{ attendance_map|default:"{}"|safe }};
    for (const [studentId, status] of Object.entries(attendance_map)) {
      const presentEl = document.getElementById('present_' + studentId);
      const absentEl = document.getElementById('absent_' + studentId);
      if (status === 'Present' && presentEl) presentEl.checked = true;
      if (status === 'Absent' && absentEl) absentEl.checked = true;
    }
  })();
</script>
{% endblock %}